/*
 * @Author: your name
 * @Date: 2021-11-26 14:46:43
 * @LastEditTime: 2021-11-29 19:20:41
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \brmsp\src\views\policy\control\register.ts
 */
import { Graph, Edge } from '@antv/x6'
import { VueShape } from '@antv/x6-vue-shape'
import HeelNode from '../shape/heelNode.vue'
import SecScreening from '../shape/secScreening.vue'
import AbTest from '../shape/abTest.vue'
import ExternalData from '../shape/externalData.vue'
import FinancialManager from '../shape/financialManager.vue'
import ManualOutboundCall from '../shape/manualOutboundCall.vue'
import ShortMessage from '../shape/shortMessage.vue'
import PhoneApp from '../shape/phoneApp.vue'
import OfficialAccount from '../shape/officialAccount.vue'
import BrainPower from '../shape/brainPower.vue'
import ChannelReferral from '../shape/channelReferral.vue'
import DelayNode from '../shape/delayNode.vue'
import EndNode from '../shape/endNode.vue'

// 所有vue组件名称
// 所有节点组
const ShapeComs = {
  HEEL_NODE: 'HeelNode', // 客群筛选
  SEC_SCREENING: 'SecScreening', // 二次筛选
  SEC_CREATE: 'SecCreate', // 二次筛选裂变产生 -- 特殊节点
  AB_TEST: 'AbTest', // AB测试
  AB_CREATE: 'AbCreate', // AB测试裂变产生  -- 特殊节点
  EXTERNAL_DATA: 'ExternalData', // 外部数据
  FINANCIAL_MANAGER: 'FinancialManager', // 理财经理
  MANUAL_OUTBOUND_CALL: 'ManualOutboundCall', // 人工外呼
  SHORT_MESSAGE: 'ShortMessage', // 短信
  PHONE_APP: 'PhoneApp', // 手机APP
  OFFICIAL_ACCOUNT: 'OfficialAccount', // 公众号
  BRAIN_POWER: 'BrainPower', // 智能外呼
  CHANNEL_REFERRAL: 'ChannelReferral', // 渠道转介
  DELAY_NODE: 'DelayNode', // 延时节点
  EQUITY_RESOURCES: 'EquityResources', // 权益资源
  END_NODE: 'EndNode', // 结束
  PARENT_NODE: 'ParentNode' // 父节点
}

// 注册vue组件到x6中
const registerVueComponent = (comNm: string) => {
  Graph.registerVueComponent(
    comNm,
    {
      template: `<${comNm} />`,
      components: {
        HeelNode,
        SecScreening,
        AbTest,
        ExternalData,
        FinancialManager,
        ManualOutboundCall,
        ShortMessage,
        PhoneApp,
        OfficialAccount,
        BrainPower,
        ChannelReferral,
        DelayNode,
        EndNode,
      },
    },
    true,
  )
}

// 注册vue组件到x6中
Object.values(ShapeComs).map(comNm => registerVueComponent(comNm))

// 定义节点
// 第一步继承VueShape
export class MyShape extends VueShape {
  // getInPorts() {
  //   return this.getPortsByGroup('in')
  // }

  // getOutPorts() {
  //   return this.getPortsByGroup('out')
  // }

  // getUsedInPorts(graph: Graph) {
  //   console.log(graph)
  //   // const incomingEdges = graph.getIncomingEdges(this) || []
  //   return [].map((edge: Edge) => {
  //     const portId = edge.getTargetPortId()
  //     return this.getPort(portId!)
  //   })
  // }

  // // eslint-disable-next-line class-methods-use-this
  // getNewInPorts(length: number) {
  //   return Array.from(
  //     {
  //       length,
  //     },
  //     () => ({
  //       group: 'in' // , id: `${this.data.comType}-out-${Date.now()}`
  //     }),
  //   )
  // }

  // // eslint-disable-next-line class-methods-use-this
  // getNewOutPorts(length: number) {
  //   return Array.from(
  //     {
  //       length,
  //     },
  //     () => ({
  //       group: 'out', // , id: `${this.data.comType}-out-${Date.now()}`
  //     }),
  //   )
  // }

  // updateInPorts(graph: Graph) {
  //   const minNumberOfPorts = 2
  //   // const ports = this.getInPorts()
  //   // const usedPorts = this.getUsedInPorts(graph)
  //   const newInPorts = this.getNewInPorts(1)
  //   const newOutPorts = this.getNewOutPorts(1)
  //   // debugger
  //   if (this.id.includes('HeelNode')) { // 起始节点
  //     this.addPorts(newOutPorts)
  //   } else if (this.id.includes('EndNode')) { // 结束节点
  //     this.addPorts(newInPorts)
  //   } else { // 其他节点
  //     this.addPorts(newOutPorts)
  //     this.addPorts(newInPorts)
  //   }
  //   // if (ports.length === minNumberOfPorts && ports.length - usedPorts.length > 0) {
  //   //   // noop
  //   // } else if (ports.length === usedPorts.length) {
  //   //   this.addPorts(newPorts)
  //   // } else if (ports.length + 1 > usedPorts.length) {
  //   //   this.prop(
  //   //     ['ports', 'items'],
  //   //     this.getOutPorts()
  //   //       .concat(usedPorts)
  //   //       .concat(newPorts),
  //   //     {
  //   //       rewrite: true,
  //   //     },
  //   //   )
  //   // }

  //   return this
  // }
}
// 第二步：配置
MyShape.config({
  attrs: {
    // root: {
    //   magnet: false,
    // },
    body: {
      fill: '#f5f5f5',
      stroke: '#d9d9d9',
      strokeWidth: 1,
    },
  },
  ports: {
    items: [
      {
        group: 'out',
      },
    ],
    groups: {
      in: {
        position: {
          name: 'top',
        },
        attrs: {
          portBody: {
            magnet: 'passive',
            r: 6,
            stroke: '#ffa940',
            fill: '#fff',
            strokeWidth: 2,
          },
        },
      },
      out: {
        position: {
          name: 'bottom',
        },
        attrs: {
          portBody: {
            magnet: true,
            r: 8,
            fill: '#fff',
            stroke: '#3199FF',
            strokeWidth: 2,
          },
        },
      },
    },
  },
  portMarkup: [
    {
      tagName: 'circle',
      selector: 'portBody',
    },
  ],
  // component: {
  //   template: `<Abtext2 />`,
  //   components: {
  //     Abtext2,
  //   },
  // },
})
// 第三步：注册
Graph.registerNode('my-shape', MyShape)

// Graph.registerEdge('my-edge', {
//   inherit: 'edge',
//   attrs: {
//     line: {
//       stroke: '#a0a0a0',
//       strokeWidth: 1,
//       targetMarker: {
//         name: 'classic',
//         size: 7,
//       },
//     },
//   },
// })
